<template>
  <el-steps
    v-model:active="active"
    :align-center="alignCenter"
    :direction="direction"
    :finish-status="finishStatus"
    :process-status="processStatus"
    :simple="simple"
    :space="space"
    :start-status="startStatus"
    @click="handleStepClick"
  >
    <el-step
      v-for="(item, index) in items"
      :key="index"
      :description="item.description"
      :disabled="item.disabled"
      :icon="item.icon"
      :status="item.status"
      :title="item.title"
    />
  </el-steps>
</template>
<script setup lang="ts">
import { ElStep, ElSteps } from 'element-plus'
import { ref, watch } from 'vue'
import type { StepItem, StepsEvents, StepsOptions } from './types'

const props = withDefaults(
  defineProps<{
    modelValue?: number
    items: StepsOptions['items']
    finishStatus?: StepsOptions['finishStatus']
    processStatus?: StepsOptions['processStatus']
    alignCenter?: boolean
    simple?: boolean
    direction?: StepsOptions['direction']
    space?: number | string
    startStatus?: StepsOptions['startStatus']
  }>(),
  {
    modelValue: 0,
    finishStatus: 'finish',
    processStatus: 'process',
    alignCenter: false,
    simple: false,
    direction: 'horizontal',
    space: 0,
    startStatus: 'wait',
  }
)

const emit = defineEmits<StepsEvents>()
const active = ref(props.modelValue)

watch(
  () => props.modelValue,
  (val) => {
    active.value = val
  }
)

watch(active, (val) => {
  emit('update:modelValue', val)
})

const handleStepClick = (step: StepItem, index: number) => {
  emit('step-click', step, index)
}
</script>

<style scoped>
.el-steps {
  width: 100%;
}
</style>
